<template>
    <div class="sidebar_box">
        <div v-if="qq" class="item_box" @click="openQQchart">
            <img class="no_active" src="../assets/cebianlan-black-liuyanban@2x.png">
            <img class="active" src="../assets/cebianlan-red-liuyanban@2x.png">
            <div>留言板</div>
        </div>
        <div class="item_box" @click="$router.push({name: 'cart'})">
            <el-badge :value="cartNumber" class="item">
                <div v-if="$route.meta.login=='car'" class="car_items_out">
                    <img style="width: 30px;height: 31px" v-if="$route.meta.login=='car'" src="../assets/cebianlan-red-gouwuche@2x.png">
                    <img style="width: 30px;height: 31px" v-else src="../assets/cebianlan-black-gouwuche @2x.png">
                </div>
                <div v-else class="car_items_out">
                    <img style="width: 30px;height: 31px" class="active" src="../assets/cebianlan-red-gouwuche@2x.png">
                    <img style="width: 30px;height: 31px" class="no_active" src="../assets/cebianlan-black-gouwuche @2x.png">
                </div>
            </el-badge>
            <div :class="{'active_none':$route.meta.login=='car'}">
                购物车
            </div>
        </div>
        <div class="item_box" @click="$router.push({name: 'ucenter'})">
            <div v-if="$route.meta.login=='PersonalCenter'" class="car_items_out">
                <img v-if="$route.meta.login=='PersonalCenter'" src="../assets/cebianlan-red-gerenzhongxin@2x.png">
                <img v-else src="../assets/cebianlan-black-gerenzhongxin@2x.png">
            </div>
            <div v-else class="car_items_out">
                <img class="no_active" src="../assets/cebianlan-black-gerenzhongxin@2x.png">
                <img class="active" src="../assets/cebianlan-red-gerenzhongxin@2x.png">
            </div>
            <div :class="{'active_none':$route.meta.login=='PersonalCenter'}">个人中心</div>
        </div>
        <div class="item_box" @click="$router.push({name: 'directory'})">
            <div v-if="$route.meta.login=='directory'" class="car_items_out">
                <img v-if="$route.meta.login=='directory'" src="../assets/cebianlan-red-zhinanzheng@2x.png">
                <img v-else src="../assets/cebianlan-black-gouwuzhinan@2x.png">
            </div>
            <div v-else class="car_items_out">
                <img class="no_active" src="../assets/cebianlan-black-gouwuzhinan@2x.png">
                <img class="active" src="../assets/cebianlan-red-zhinanzheng@2x.png">
            </div>
            <div :class="{'active_none':$route.meta.login=='directory'}">购物指南</div>
        </div>
        <div class="item_box" @click="$router.push({name: 'characteristic'})">
            <div v-if="$route.meta.login=='characteristic'" class="car_items_out">
                <img v-if="$route.meta.login=='characteristic'" src="../assets/cebianlan-red-shouhoufuwu @2x.png">
                <img v-else src="../assets/cebianlan-black-shouhoufuwu@2x.png">
            </div>
            <div class="car_items_out" v-else>
                <img class="no_active" src="../assets/cebianlan-black-shouhoufuwu@2x.png">
                <img class="active" src="../assets/cebianlan-red-shouhoufuwu @2x.png">
            </div>
            <div :class="{'active_none':$route.meta.login=='characteristic'}">售后服务</div>
        </div>
        <div class="item_box" @click="goTop">
            <img class="no_active" src="../assets/cebianlan-black-huidaodingbu@2x.png">
            <img class="active" src="../assets/cebianlan-red-huidaodingbu@2x.png">
            <div>回到顶部</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "sidebar",
        computed: {
            cartNumber() {
                return this.$store.state.cartNumber;
            },
            qq() {
                return this.$store.state.qq;
            }
        },
        created() {
            if (window.localStorage.getItem('token')) {
                this.$store.commit('changeCartNumber');
            }
        },
        methods: {
            goTop() {
                window.scrollTo(0, 0)
            },
            openQQchart() {
                if (this.qq) {
                    // window.open('tencent://message/?Site=baidu.com&uin=2852375319&Menu=yes', '_blank');
                    window.open('http://wpa.qq.com/msgrd?v=3&uin=' + this.qq + '&site=qq&menu=yes', '_brank');
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .sidebar_box {
        width: 108px;
        border: 1px solid #000000;
        box-sizing: border-box;
        padding: 35px 0 32px;
        position: fixed;
        z-index: 4;
        top: 50%;
        cursor: pointer;
        transform: translateY(-50%);
        background: #FFFFFF;
        right: 0;
        
        .item_box {
            text-align: center;
            margin-bottom: 21px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
            
            .car_items_out {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            
            img {
                margin-bottom: 6px;
                width: 33px;
                height: 33px;
                object-fit: contain;
            }
            
            .no_active {
                display: inline-block;
            }
            
            .active {
                display: none;
            }
            
            .active_none {
                color: #B11E24;
            }
        }
        
        .item_box:hover {
            color: #B11E24;
            
            .no_active {
                display: none;
            }
            
            .active {
                display: inline-block;
            }
        }
    }
</style>
